<template>
  <div class="page">
    <div class="width-style">
      <el-row type="flex" justify="space-between">
        <el-col :span="5">
          <div class="left_menu_wrap">
            <!--用户名-->
            <div class="user_wrap">
              <el-avatar
                shape="circle"
                :size="80"
                :src="avatarUrl"
              ></el-avatar>
              <div class="user_info_wrap">
                <span style="text-align: left;font-size: 16px;color: #000;margin-bottom: 5px;">用户名：{{ userName }}</span>
                <a v-if="roles==='admin'||roles==='author'" style="color: #25b6a0;font-size: 10px;" href="http://124.222.236.194/index" target="_blank">跳转后台</a>
                <span style="text-align: left;font-size: 12px;color: #666;">浏览量: {{pubCounts}}</span>
                <span style="text-align: left;font-size: 12px;color: #666;">关注: {{subscibeCount}}</span>
                <span style="text-align: left;font-size: 12px;color: #666;">粉丝: {{fansCount}}</span>
              </div>
            </div>
            <!--左侧导航栏-->
            <el-menu
              default-active="/personalCenter/baseData"
              class="el-menu-vertical-demo"
              unique-opened
              router
            >
<!--//资料中心-->
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-folder-opened"></i>
                  <span>资料中心</span>
                </template>
                <el-menu-item index="/personalcenter/basedata"
                  >基本资料</el-menu-item
                >
                <el-menu-item index="/personalCenter/bind"
                  >账号绑定</el-menu-item
                >
                <el-menu-item index="/personalCenter/pwd"
                  >密码管理</el-menu-item
                >

<!--                <el-menu-item index="/personalCenter/touxiang"-->
<!--                  >touxiang2</el-menu-item-->
<!--                >-->
              </el-submenu>
<!--//消息中心-->
              <el-menu-item index="/personalCenter/msgSendList">
                <i class="el-icon-message"></i>
                <span slot="title">评论通知</span>
              </el-menu-item>
<!--              <el-submenu index="2">-->
<!--                <template slot="title">-->
<!--                  <i class="el-icon-message"></i>-->
<!--                  <el-badge is-dot><span>消息中心</span></el-badge>-->
<!--                  &lt;!&ndash;                  <el-badge is-dot class="item" >消息中心</el-badge>&ndash;&gt;-->
<!--                </template>-->
<!--                <el-submenu index="2-1">-->
<!--                  <template slot="title"-->
<!--                    ><el-badge is-dot>个人消息</el-badge></template-->
<!--                  >-->
<!--                  <el-menu-item index="/personalCenter/comment"-->
<!--                    >评论</el-menu-item-->
<!--                  >-->
<!--                  <el-menu-item index="/personalCenter/leaveWords"-->
<!--                    >留言</el-menu-item-->
<!--                  >-->
<!--                </el-submenu>-->
<!--                <el-menu-item index="/personalCenter/system"-->
<!--                  ><el-badge is-dot>系统消息</el-badge></el-menu-item-->
<!--                >-->
<!--              </el-submenu>-->
<!--//作品中心-->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-management"></i>
                  <span>作品中心</span>
                </template>

                <el-menu-item index="/personalCenter/pub"
                  >我的发布</el-menu-item
                >
                <el-menu-item index="/personalCenter/drafts"
                  >草稿箱</el-menu-item
                >

              </el-submenu>
<!--//我的喜欢-->

              <el-menu-item index="/personalcenter/like">
                <i class="iconfont icon-xihuan interest"></i>
                <span slot="title">我的喜欢</span>
              </el-menu-item>
<!--//我的收藏-->
              <el-menu-item index="/personalcenter/collection">
                <i class="el-icon-star-off"></i>
                <span slot="title">我的收藏</span>
              </el-menu-item>

<!--              <el-menu-item index="/personalcenter/history">-->
<!--                <i class="el-icon-time"></i>-->
<!--                <span slot="title">浏览记录</span>-->
<!--              </el-menu-item>-->
<!--//我的关注-->
              <el-menu-item index="/personalCenter/myInterest">
                <i class="iconfont icon-guanzhuderen2 interest"></i>
                <span slot="title">我的关注</span>
              </el-menu-item>
<!--//我的粉丝-->
              <el-menu-item index="/personalCenter/myFollower">
                <i class="iconfont icon-fensi interest"></i>
                <span slot="title">我的粉丝</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="18">
          <nuxt-child />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  layout: "personalCenterLayout",
  name: "PersonalCenter",
  middleware: ['authenticated'],
  data(){
    return{
		  avatarUrl:'',
      userId:null,
      userName:'',
      roles:'',
      userInfo:{},
	    pubCounts:0,
	    subscibeCount:0,
	    fansCount:0
    }
  },
  async asyncData({ app, store, route }) {
      const res = await app.api.reqUserInfo();
      console.log(app.$cookies.get("token"),res);
      return {
        useName: res.data,
        // authorization: app.$cookies.get("token"),
      };
  },

  beforeCreate(){
    if(this.$route.path==='/personalcenter'){
      this.$router.push('/personalcenter/baseData')
    }
  },
  mounted() {
  	this.getUserInfo();
  },
	methods:{
		async getUserInfo(){
			const res = await this.$api.reqUserInfo();
			console.log(res);
			if(res.code==200){
				this.getPubCount(res.user.userId);
				this.getSubscribeList(res.user.userId);
				this.getFansList(res.user.userId);
				this.$cookies.set('userId',res.user.userId);
				this.userName=res.user.userName;
				this.userId=res.user.userId;
				this.roles=res.roles[0];
				// this.avatarUrl='http://124.222.236.194/dev-api'+res.user.avatar;
        this.avatarUrl=this.$api.BASEURL +res.user.avatar;
				console.log(this.userName,this.avatarUrl);
			}
		},
		async getPubCount(userId){
			const res = await this.$api.reqPubCount(userId);
			if(res.code==200){
				this.pubCounts=res.counts;
			}
		},
		async getSubscribeList(userId){
			const res = await this.$api.reqSubscribeList(userId);
			if(res.code==200){
				this.subscibeCount=res.total;
			}
		},
		async getFansList(userId){
			const res = await this.$api.reqFansList(userId);
			if(res.code==200){
				this.fansCount=res.total;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-width: 1200px;
  text-align: left !important;
  min-height: calc(100vh - 65.5px);
  padding-top: 20px;
  box-sizing: border-box;
  background-color: #f6f7f9;
  .left_menu_wrap {
    width: 110%;
    min-height: calc(100vh - 65.5px - 10px);
    background-color: #fff;
    padding: 0 30px;
    box-sizing: border-box;

    .user_wrap {
      display: flex;
      padding: 20px 0;
      box-sizing: border-box;
    }
    .user_info_wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 20px;
    }
    .el-menu {
      text-align: left !important;
      border-right: 0;
    }
  }
  //.item{
  //  height: 5px;
  //}
}
.el-badge {
  display: inline;
}
.interest{
  width: 18px;
  height: 18.5px;
  padding-left: 2px;
  margin-right: 12px;
  text-align: center;
}
//html * {
//  outline: 1px solid red
//}
</style>
